<template>
	<view class="container">
		<iceSerch @iceSerchClick="iceSerchClick" />
		<view class="fill"></view>
		<view class="listBox" v-for="(v,k) in lists" :key="k" @click="click(v.id,v.title)">
			<view v-if="v.page">
				<hr class="hr"/>
				<view class="page">{{`第 ${v.page} 页`}}</view>
			</view>
			<view class="list" v-else>
				<view class="box">
					<view class="iceFlex">
						<view class="left">
							<view class="iceFlex">
								<h3>{{v.title}}</h3>
								<view class="tag">考试</view>
							</view>
							<view class="state iceFlex">
								<view class="point">
								</view>
								<view class="">
									已发布
								</view>
							</view>
						</view>
						<view class="right">
							<view>{{v.exam_count}}</view>
							<view>答卷数量</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="notMore" v-if="lists.length - params.page == total">
			没有更多了
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		postReadoverExamination
	} from '../../src/api/prePaper.js';
	import iceSerch from '../../components/itemNeed/iceSerch.vue';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		iceMo,
		iceMc
	} from '../../utils/iceMask.js';
	import {
		iceLo,
		iceLc
	} from '../../utils/iceLoading.js';

	const params = reactive({
		page: 1,
		limit: 7,
	})
	const lists = ref([])
	const sti = ref(null)
	const total = ref(0)
	const loadingTitle = ref('正在加载列表')
	// 加仪式感然后请求列表
	const getList = (param, isOnReachBottom = false) => {
		iceMo()
		iceLo(loadingTitle.value)
		sti.value = setTimeout(() => {
			init(param, isOnReachBottom)
		}, 1000)
	}
	// 请求列表
	const init = (param, isOnReachBottom) => {
		postReadoverExamination(param).then(res => {
			if (isOnReachBottom) {
				lists.value = [...lists.value, {
					page: params.page
				}, ...res.data.data]
			} else {
				lists.value = [{
					page: params.page
				}, ...res.data.data]
			}
			total.value = res.data.total
			uni.stopPullDownRefresh();
			iceMc()
			iceLc()
			clearTimeout(sti.value)
		})
	}
	// 页面初始化
	getList(params)
	// 下拉刷新
	onPullDownRefresh(() => {
		params.page = 1
		loadingTitle.value = '正在加载列表'
		getList(params)
	})
	// v点击
	const click = (exam_id,title) => {
		uni.navigateTo({
			url: `/pages/kaoshiList/result?exam_id=${exam_id}&title=${title}`
		})
	}
	// 关键词搜索
	const iceSerchClick = (e) => {
		loadingTitle.value = `按【 ${e.keywords} 】搜索`
		getList(e)
	}
	// 上拉加载
	onReachBottom(() => {
		if (lists.value.length < total.value) {
			params.page++
			loadingTitle.value = `加载第${params.page}页数据`
			getList(params, true)
		}
	})
</script>
<style lang="scss" scoped>
	.container {
		background-color: #F3F4F6;
		.listBox{
			position: relative;
			.hr{
				width: 90%;
				margin: 0 auto;
				color:#fff ;
			}
			.page{
				width: 60px;
				text-align: center;
				position: absolute;
				top:-12px;
				left:50%;
				margin-left: -30px;
				color: red;
				font-weight: bold;
				background-color: #F3F4F6;
				padding: 0 5px;
			}
		}
		.notMore {
			text-align: center;
			padding-bottom: 20px;
			text-shadow: #B3B3B3 2px 2px 2px;
		}

		.fill {
			height: 100px;
		}

		.list {
			width: 92%;
			height: 100px;
			border: 1px #fff solid;
			border-radius: 10px;
			margin: 20px 4%;
			background-color: #fff;

			.box {
				width: 90%;
				height: 60%;
				margin: 5% auto;

				.left {
					.tag {
						margin-left: 1em;
						font-size: 12px;
						padding: 2px 8px;
						border-radius: 14px;
						border: 1px #f56c6c solid;
						background-color: #fde2e2;
						color: #f56c6c;
					}

					.state {
						margin-top: 8px;
						width: 66px;

						.point {
							width: 10px;
							height: 10px;
							border-radius: 50%;
							background-color: #76ff33;
							// margin-top: 6px;
						}
					}
				}

				.right {
					padding-left: 10px;
					border-left: 1px #eee solid;
					text-align: center;

					view:nth-child(1) {
						color: #1E9FFA;
						font-weight: bold;
						font-size: 27px;
					}

					view:nth-child(2) {
						color: #B3B3B3;
					}
				}
			}
		}

	}
</style>